<template>
  <section class="course-list-section">
    <a-form ref="formRef" :rules="formRules" :model="formState" v-bind="formItemLayout" @finish="onFinish">
      <a-form-item label="昵称" name="userName">
        <a-input v-model:value="formState.userName" placeholder="输入昵称">
        </a-input>
      </a-form-item>
      <a-form-item label="账号" name="accountNumber">
        <a-input v-model:value="formState.accountNumber" :rows="4" placeholder="输入账号"/>
      </a-form-item>
      <a-form-item label="密码" name="password">
        <a-input v-model:value="formState.password" placeholder="输入密码"></a-input>
      </a-form-item>
      <a-form-item label="年龄" name="age">
        <a-input v-model:value="formState.age" placeholder="输入年龄"></a-input>
      </a-form-item>
      <a-form-item label="性别" name="gender">
        <a-select v-model="formState.gender" placeholder="选择性别" :options="genderOptions">
        </a-select>
      </a-form-item>
      <a-form-item label="角色">
        <a-select v-model:value="formState.role" :options="roleOptions" placeholder="选择性别"></a-select>
      </a-form-item>
      <a-form-item name="icon" label="头像">
        <a-upload
            v-model:fileList="formState.icon"
            name="logo"
            action="/upload.do"
            list-type="picture">
          <a-button>
            <template #icon>
              <UploadOutlined/>
            </template>
            点击上传
          </a-button>
        </a-upload>
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-radio-group v-model:value="formState.status">
          <template v-for="(item,index) in statusOptions" :key="index">
            <a-radio :value="item.value">{{ item.label }}</a-radio>
          </template>
        </a-radio-group>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
        <a-button type="primary" html-type="submit">提交</a-button>
        <a-button style="margin: 0 8px" @click="()=>router.back()">返回</a-button>
      </a-form-item>
    </a-form>
  </section>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import type {Rule} from "ant-design-vue/es/form";
import type {FormInstance} from "ant-design-vue";
import {addUsers, curriculumList, users} from "@/api";
import {useRoute, useRouter} from "vue-router";

const router = useRouter();
const route = useRoute();
const formItemLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 14},
};
//表单数据
const formState = reactive({
  userName: "",//昵称
  accountNumber: "",
  password: "",
  age: 0,
  gender: 0,
  icon: [],
  role: "0"
})
//表单验证
const formRules: Record<string, Rule[]> = {}
//表单ref
const formRef = ref<FormInstance>()
const genderOptions = [
  {value: '0', label: '男'},
  {value: '1', label: '女'}
]
const roleOptions = [
  {value: '0', label: '讲师'},
  {value: '1', label: '学生'}
]
//账号状态
const statusOptions = [
  {value: '0', label: '禁用'},
  {value: '1', label: '启用'}
]
/**
 * 提交
 * @param values
 */
const onFinish = (values: any) => {
  console.log('Success:', values);
  const params = {
    userName: "宁连举",//昵称
    accountNumber: "15001063313",
    password: "123456",
    age: 30,
    gender: 0,
    icon: "https://teacher.bupt.edu.cn/__local/0/F9/BD/0AF8572D868B9FD9CF52DD65E11_15278F01_1777F.jpg",
    role: "0",
    classId:"1",
    tags: "教授、博士、博士生导师",
    desc: "教授、博士、博士生导师。邮政行业科技英才。历任北京邮电大学世纪学院副院长、经济管理学院副院长、现代邮政学院（自动化学院）副院长、北京邮电大学大数据与商业模式研究中心主任。主要研究方向：战略管理、创新与创业管理，重点聚焦于数字化转型、数字经济、数字化战略、数字化商业模式设计、数字化生态、平台型企业、产业互联网、区域生态创新。主持国家自然科学基金、北京市自然科学基金、中国工程院重点研发计划等科研项目30余项、发表科研论文50余篇、出版著作3部。"
  }
  addUsers(params).then((res) => {
    console.log("添加账号", res.data)
    // router.back()
  })
}
/**
 * 获取账号详情
 */
const getCurriculum = (id: number | string) => {
  console.log("getCurriculum=====id", id)
  users({id}).then((res) => {
    console.log("curriculumList", res.data)
  })
}
onMounted(() => {
  if (route.query.id) {
    const id: string | number = route.query.id as string
    console.log("onMounted=====id", id)
    getCurriculum(id);
  }

})
</script>
<style scoped lang="less">
.course-list-section {
  position: relative;
  padding: 20px;
  background: #fff;
  margin: 10px;
  border-radius: 10px;
}

.teacher-info-top {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 140px;

  .teacher-info-top-bg {
    width: 100%;
    height: 100%;
    filter: blur(60px);
    position: absolute;
    z-index: 50;
  }

  .teacher-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #fff;
    position: relative;
    z-index: 100;
  }

  .desc {
    margin-left: 20px;

    .name {
      font-size: 18px;
      position: relative;
      box-sizing: border-box;
      color: white;
      z-index: 100;
    }

    .level {
      position: relative;
      z-index: 100;
      font-size: 14px;
      color: white;
    }
  }
}

.container {
  width: 1160px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 50px;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
}
</style>
